<template>
  <div class="friends-container">
    <!-- 联系人列表 -->
    <van-cell-group class="friends">
      <van-cell
        class="person"
        v-for="item in 10"
        :key="item"
        @click="showPopup = true"
      >
        <van-image
          :src="require('@/assets/头像1.png')"
          slot="icon"
          class="pic"
          fit="contain"
        ></van-image>
        <span slot="title" class="name">Kaitlyn</span>
        <span slot="label" class="msg">这个衣服怎么样？</span>
        <van-badge class="time">
          <span class="time1">2:24</span>
          <i class="iconfont icon-dot"></i>
        </van-badge>
      </van-cell>
    </van-cell-group>
    <!-- 聊天窗口 -->
    <!-- 频道列表 -->
    <van-popup
      v-model="showPopup"
      position="right"
      :style="{ height: '100%',width:'100%'}"
      closeable
      close-icon-position="top-left"
      close-icon="arrow-left"
    >
      <chat></chat>
    </van-popup>
  </div>
</template>

<script>
import chat from './chat'
export default {
  // 定义属性
  data() {
    return {
      showPopup: false
    }
  },
  components: {
    chat
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
.friends-container {
  overflow-y: auto;
  height: 76vh;
  // padding: 0 30px;
  .friends {
    text-align: left;
    .person {
      height: 120px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.13);
      margin-bottom: 30px;
      .pic {
        width: 86px;
        height: 86px;
        margin-right: 26px;
      }
      .name {
        font-size: 28px;
        color: #4a4a4a;
      }
      .msg {
        font-size: 22px;
        color: #9b9b9b;
      }
      .van-cell__label {
        margin-top: 0;
      }
      .time {
        color: #9b9b9b;
        font-size: 22px;
        line-height: 80px;
        .iconfont {
          margin-left: 10px;
          font-size: 10px;
          color: #e86c6c;
        }
      }
    }
  }
}
</style>
